<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
	<head>
		<title>跑马灯公告管理</title>
		<base href="<%=basePath%>" />
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<link rel="stylesheet" href="layui/css/layui.css" media="all"> <!-- 适应所有设备 -->
		<style type="text/css">
		</style>
	</head>
	<% String nowDay = new SimpleDateFormat("yyyy-MM-dd").format(new Date()); %>
	<body>
	    <table class="layui-table" id="NameList" lay-filter="NameList"></table>
	    
        <script type="text/html" id="Duration">
            {{#  if(d.Duration === 0){ }}
                 <span>永久</span>
            {{# }else { }}
                 <span>{{ d.Duration }}</span>
            {{# } }}
       </script>
        
        
        <script type="text/html" id="barDemo">
            {{#  if(d.State === 0){ }}
                 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">取消循环</a>
            {{# }else{ }}
                 <span>\</span>
            {{# } }}
        </script>
        
        <script type="text/html" id="State">
            {{#  if(d.State === 0){ }}
                 <a class="layui-btn layui-btn-xs" lay-event="del">生效中</a>
            {{# }else if(d.State === 1){ }}
                 <a class="layui-btn layui-btn-primary layui-btn-xs">已移除</a>
            {{# }else if(d.State === 2){ }}
                 <a class="layui-btn layui-btn-danger layui-btn-xs">已过期</a>
            {{# } }}
       </script>
       
       <script type="text/html" id="RemoveTime">
            {{#  if (d.State == 2){ }}
                 <span>{{ CountTime(d.CreateTime,d.Duration) }}</span>
            {{# }else if (d.State == 0){ }}
                 <span>{{ d.CreateTime }}</span>
            {{# }else { }}
                 <span>{{ d.RemoveTime }}</span>
            {{# } }}
       </script>
       
       <script type="text/html" id="RemoveOperater">
            {{#  if (d.State == 2){ }}
                 <span>{{ d.CreateOperater }}</span>
            {{# }else if (d.State == 0){ }}
                 <span>{{ d.CreateOperater }}</span>
            {{# }else { }}
                 <span>{{ d.RemoveOperater }}</span>
            {{# } }}
       </script>
	    
	    <script src="js/jquery.min.js"></script>
		<script src="layui/layui.js"></script>
		<script src="js/personal/operatetime.js"></script>
		<script>
		    layui.use(['layer','form','table'],function(){
		    	var layer = layui.layer,
		    	    form  = layui.form,
		    	    table = layui.table;
		    	
		    	layer.config({
					extend: 'MySkin/style.css'
				});
		    	
		    	table.render({
		    		elem:'#NameList',
		    		url:'Runnotice/List',
		    		toolbar: '#toolbar', //开启头部工具栏，并为其绑定左侧模板
		    		defaultToolbar: [],  //隐藏右边工具栏
		    		method:'post',
		    		title:'跑马灯公告列表',
		    		skin: 'row',
		    		even: true,//开启隔行背景
		    		id:'AllTable',
		    		cellMinWidth : 100,
		    		page : true,//分页
		    		request:{
						pageName:'pageIndex',
						limitName:'pageCount'
					},
		    		cols:[[
		    			{field:'Id',title:'Id'},
		    			{field:'Content',title:'播报内容',style:'color:blue'},
		    			{field:'CreateOperater',title:'发布人 ',style:'color:#00ae9d'},
		    			{field:'Duration',title:'播放时长(单位:s)',style:'color:#f391a9',templet:'#Duration'},
		    			{field:'Interval',title:'间隔时长(单位:s)',style:'color:blue'},
		    			{field:'CreateTime',title:'发布时间',style:'color:#840228'},
		    			{field: 'RemoveOperater',title:'最后操作人',style:'color:#00ae9d',templet:'#RemoveOperater'},
		    			{field:'RemoveTime',title:'操作时间',style:'color:#00ae9d',templet:'#RemoveTime'},
		    			{field:'State',title:'状态 ',style:'color:#00ae9d',templet:'#State'},
		    			{fixed: 'right',title:'操作',toolbar:'#barDemo'}
		    			]],
						response : {
							statusCode : 200
						//重新规定成功的状态码为 200，table 组件默认为 0
						},
						parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
							return {
								"code" : res.status, //解析接口状态
								"msg" : res.message, //解析提示文本
								"count" : res.count, //解析数据长度
								"data" : res.data
							//解析数据列表
							};
						}
		    	});
		    	
		    	
		    	//监听行工具事件
		    	table.on('tool(NameList)',function(obj){
		    		var data = obj.data
		    		   ,layEvent = obj.event;
		    		if (layEvent === 'del'){
			    		$.ajax({
			    			type:"POST",
			    		    url:'Runnotice/Remove',
			    		    data:{Id:data.Id},
			    		    async: true,
			    			success:function(resp){  // res是server端响应
			    			    if(resp == "" || resp == null){
			    				  layer.msg("取消循环成功",{icon:1});
			    				  setTimeout(function(){
			    					  table.reload('AllTable', {});
			    				  },1000);
			    			    }else{
			    			    	layer.msg(resp,{icon:2});
			    			    }
			    			},error:function(){
			    			    layer.msg("取消循环失败",{icon:2});
			    			}
			    		});
		    		}
		    	});
		    	
	    	//按照当前的状态重载
			setInterval(function(){
              	table.reload('AllTable', {});
              },60000);
		    	
		    });
		</script>
    </body>
</html>